UI Development with Chakra UI Vue — Toast

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Toast

Chakra UI Vue comes with a toast component.

To add it, we can write:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

<script>
import { CBox, CButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        title: "Account created.",
        description: "We've created your account for you.",
        status: "info",
        duration: 10000,
      });
    },
  },
};
</script>

We have a c-button that calls the showToast method when we click it.

In the showToast method, we call the this.$toast method to open the toast.

title has the title.

description has the main content text.

status sets the type of toast to show.

status can also be 'success' , 'warning' or 'error' .

duration is the duration milliseconds that the toast would be shown.

We can also set a component to show as the toast content.

For instance, we can write:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

<script>
import { CBox, CButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        position: "bottom-left",
        render: () => {
          return this.$createElement(
            "c-box",
            {
              props: {
                color: "white",
                p: 3,
                m: 3,
                bg: "blue.500",
              },
            },
            "Hello World!"
          );
        },
      });
    },
  },
};
</script>

We have the render method that returns c-box component as the toast content.

The props property has the props we pass into c-box .

The 3rd argument has the child content of the c-box .

So when we click on the c-button , ‘Hello World!’ should be shown.

position sets the position of the toast.

The variant property changes the background color style.

For instance, if we have:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

<script>
import { CBox, CButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        title: "Account created.",
        description: "We've created your account for you.",
        status: "info",
        duration: 10000,
        variant: "subtle",
      });
    },
  },
};
</script>

Then the toast background color is lighter because variant is set to 'subtle' .

Conclusion

We can add a toast with Chakra UI Vue.